<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>金豆规则</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
</head>

<body>
<% include("../layout/loading.html"){} %>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

            <table class="layui-table" id="TABLE" lay-filter="userTable"></table>
        </div>
    </div>
</div>
<style>
    .js-modify{padding:.2em .5em;border-radius:.2em;border:1px solid #666;cursor:pointer;}
</style>
<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(["layer", "form", "table", "util",'admin', "upload"], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;

        // var modifyPeaseNums = "sign_everydate sign_10 update_head study_video_3 study_match_20".split(" ");
        // 行为事项 可编辑位置
        var messages={
            study_video_3:[5,-2]
            ,study_voice_3:[5,-2]
            ,study_match_20:[5,-1]
        };

        var splitMsg = d => {
            if(!messages.hasOwnProperty(d.code)) return d.message;
            let m = messages[d.code];
            let a = d.message.substr(0,m[0]);
            let c = d.message.substr(m[1]);
            let b = d.message.substr(m[0]).replace(c,"");
            return [a,b,c];
        }

        // 表格内的输入框
        // 新方案
        var modifyText = (d,kv,k) => ["<span data-id='",d.id,"' data-t='",d.type,"' data-k='",k,"' data-kv='",kv,"' data-v='",kv,"' class='js-modify' data-code='",d.code,"' data-message='"+d.message+"'>",kv,"</span>"].join("")
        // 原方案
        // var modifyText = (d,kv,k) => ["<span data-id='",d.id,"' data-k='",k,"' data-kv='",kv,"' data-v='",kv,"' class='js-modify' contenteditable='true' >",kv,"</span>"].join("")
        var cols = [
            {title:"编号",field:"id",width:50},
                {title:"类型", templet: d => " 签到 完善资料 学习 分享".split(" ")[d.type] },
                {title:"行为事项",templet: d => {
                    if(!messages.hasOwnProperty(d.code)) return d.message;
                    let dd = splitMsg(d);
                    return [dd[0],modifyText(d,dd[1],"message"),dd[2]].join("");
                }},
                {title:"获得金豆",templet: d => modifyText(d,d.peaseNum,"peaseNum") }
            ];
        // 居中
        cols.forEach( i => i.align="center");
        // 渲染表格
        var insTb = table.render({
            elem: '#TABLE',
            cellMinWidth: 100,
            url: 'peaseRule/list',
            page: true,
            cols: [ cols ]
        });
        // 统一Post请求
        function doPost(url,data,args){
            top.layer.load(2);
            console.log(data);
            $.post(url, data , function (res){
                top.layer.closeAll();
                let isOk = [0,200].includes(res.code);
                if(res.msg)top.layer.msg(res.msg, {icon: isOk ? 1 :2});
                if(isOk){
                    insTb.reload();//刷列表
                    if(typeof args == "function")args(res);//回调
                }
            }, 'json');
        }

        //新方案: 点击后弹出修改框 
        $(document.body).on("click",".js-modify",function(e){
            let d = $(e.target).data();
            top.layer.prompt({title:"请输入",formType:3,value:d.kv},function(v,i){
                if(!Number.isInteger(Number(v))||v<1) return top.layer.msg("请输入正整数", {icon: 2});
                d.flag = "edit" ;
                d.type = d.t;
                console.log(d);
                if(d.k=="message"){
                    let s = splitMsg(d);
                    s[1] = v;
                    v = s.join("");
                }
                d[d.k] = v;
                doPost("peaseRule/crud",d);
            });
        });
        // 原方案:在表格内编辑(废弃)
        $(document.body).on("keypress keyup",".js-modify",function(e){
            if(e.type=="change"|| e.type == "keypress" && e.keyCode==13){
                
                let val = $(e.target).text().trim();
                let data = $(e.target).data();
                if(Number.isInteger(Number(val))||val>1){
                    data[data.k] = $(e.target).closest("div").text().replace(/" |&nbsp;"/gim,"");
                    setTimeout(x => e.target.innerHTML = val,10);
                    data.flag = "edit" ;
                    top.layer.confirm("确定要修改吗?",{btn:["确定","取消"]}
                        , r => doPost("peaseRule/crud",data )
                        , r => e.target.innerHTML = data.v
                    ) 
                }else {
                    setTimeout(x => e.target.innerHTML = data.v,10);
                    top.layer.msg("请输入正整数", {icon: 2});
                };
            }
        });

    });
</script>
</body>
</html>